<!--
 * @Descripttion: 
 * @version: 
 * @Author: cyj
 * @Date: 2022-12-10 19:58:00
-->
<template>
    <div class="new-songs" v-if="newSongList.length !== 0">
        <!-- 标题部分 -->
        <div class="title" @click="gotoNewSongs">
            <span class="text">最新音乐</span>
            <el-icon size="20">
                <ArrowRight />
            </el-icon>
        </div>

        <div class="main">
            <div class="main-item" v-for="(item, index) in newSongList" :key="item.id" @click="click(item)">
                <div class="main-item-img">
                    <img  v-lazy="item.picUrl" alt="">
                    <div class="icon">
                        <span class="iconfont icon-shipinbofangshibofang"></span>
                    </div>
                </div>
                <div class="main-item-info">
                    <div class="sname">{{ item.name }}</div>
                    <span class="aname" v-for="(ele, index) in item.song.artists" :key="index"> / {{ ele.name }} </span>
                </div>

            </div>
        </div>
    </div>
</template>

<script setup>
// 350*50
import { useRouter } from 'vue-router'
import { getSongUrl, getEverySongDetail } from '@/api/playmusic/playmusic.js'
import { useMusicStore } from '@/store/music.js'
import { reactive, nextTick,computed } from 'vue'
const router = useRouter()
const music = useMusicStore()
defineProps({
    newSongList: {
        type: Array,
        default: []
    }
})
const info = reactive({
    songUrl: '',
    songDetail: {}
})
function gotoNewSongs() {
    router.push({
        path: '/findmusic/newsongs'
    })
}

//点击某一个音乐
async function click(song) {
    /**一开始使用promise会出现修改music仓库出错。原因是因为promise是异步的，
     * 下面的同步代码先执行，所以导致没有数据传给music仓库。需要改用async和await搭配 */
    //获取某歌曲播放地址
    let res = await getSongUrl(song.id)
    if (res.data.code == 200)
        info.songUrl = res.data.data[0].url
    //获取歌曲详细信息
    let res1 = await getEverySongDetail(song.id)  
    if (res1.data.code == 200)
        info.songDetail = res1.data.songs[0];
    if (info.songDetail != {} && info.songUrl != '') {
        music.changePlayState(true); //修改当前音乐播放状态
        music.saveSongUrl(info.songUrl)
        music.SaveSongDetailAndaddHistoryPlayList(info.songDetail); //保存歌曲详细信息
        music.addPlayingList(info.songDetail); //添加到当前播放列表中
    }
}

</script>

<style lang="scss" scoped>
.new-songs {
    margin-top: 20px;

    .title {
        cursor: pointer;
        width: 180px;
        display: flex;
        align-items: center;

        .text {
            font-size: 20px;
            font-weight: 700;
            margin-right: 5px;
        }
    }

    .main {
        margin-top: 10px;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        height: 250px;

        &-item {
            display: flex;
            height: 50px;
            width: 350px;
            margin-bottom: 10px;
            border-radius: 8px;

            &-img {
                height: 50px;
                width: 50px;
                border-radius: 8px;
                position: relative;

                img {
                    height: 100%;
                    width: 100%;
                }
            }

            &-info {
                margin-left: 7px;

                .sname {
                    margin-bottom: 5px;
                }

                .aname {
                    font-size: 10px;
                    color: gray;
                }
            }

            &:hover {
                background: #ebebeb;

            }

        }


    }
}

.icon {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.icon .icon-shipinbofangshibofang {
    background-color: white;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    font-size: 18px;
    color: var(--mycompColor);
    text-align: center;
    line-height: 25px;
    padding-left: 2px;
}
</style>